<!--
 * @Description:
 * @Author BPF
 * @create 2021/12/5 17:52
 -->
<template>
  <div class="page">
    <van-nav-bar title="公共业务组件" left-arrow />
    <div class="page__body">
      <div class="page__card my-12">
        <g-title type="warning" dark class="my-12">
          <div style="font-size: 0.28rem">
            注：业务型组件放在项目 src/components/business 目录，在组件上前缀有g-开头，表示全局性组件，这边只做了在
            src/components/base 和 src/components/business 下自动注册了全局组件, 注册全局逻辑封装在了
            src/plugins/global-components.js
          </div>
        </g-title>
      </div>

      <!--  科室、医生选择组件    -->
      <div class="page__card my-12">
        <g-title>一、科室、医生选择组件</g-title>
        <g-doctor-departs-picker
          :doct-code.sync="doctCode"
          :dept-code.sync="deptCode"
          @init="init"
          @confirm="onConfirmDept"
        >
        </g-doctor-departs-picker>

        <div class="font-content mt-12 px-12">
          <g-title type="success">值区</g-title>
          <div>科室code：{{ deptCode }}</div>
          <div>医生选code：{{ doctCode }}</div>
        </div>
      </div>

      <!--  日期组件  -->
      <div class="page__card my-12">
        <g-title>二、日期组件</g-title>
        <g-filter-date-pro
          v-model="flitertime"
          :dateTypes="filtertimeOptions"
          style="margin-left: 0.2rem"
          ref="datePro"
          @confirm="onConfirmDate"
        ></g-filter-date-pro>
        <br />

        <div class="mx-12">
          <g-title class="mt-12" type="success">操作区</g-title>
          <van-button
            type="info"
            @click="
              () => {
                flitertime = '年'
                filtertimeOptions = ['年', '月', '日']
                Toast('设置成功')
              }
            "
            size="mini"
            >选项 日/月/年</van-button
          >
          <van-button
            type="info"
            @click="
              () => {
                flitertime = '季'
                filtertimeOptions = ['季']
                Toast('设置成功')
              }
            "
            size="mini"
            >选项 季</van-button
          >
          <van-button
            type="info"
            @click="
              () => {
                flitertime = '年'
                filtertimeOptions = ['年', '季', '月', '日']
                Toast('设置成功')
              }
            "
            size="mini"
            >选项 日/月/季/年</van-button
          >
          <div class="font-content mt-12">
            <g-title type="success">值区</g-title>
            <div>时间类型：{{ flitertime }}</div>
            <div>开始时间：{{ searchParams.start }}</div>
            <div>结束时间：{{ searchParams.end }}</div>
            <div>上次开始时间：{{ searchParams.lastStart }}</div>
            <div>上次结束时间：{{ searchParams.lastEnd }}</div>
            <template v-if="flitertime == '日'">
              <div>一周前时间：{{ searchParams.weekStart }}</div>
              <div>两周前时间：{{ searchParams.twoWeekStart }}</div>
              <div>近一周数组：{{ searchParams.list }}</div>
            </template>
            <template v-else-if="flitertime == '月'">
              <div>月环比开始时间：{{ searchParams.chainMonthStart }}</div>
              <div>月环比结束时间：{{ searchParams.chainMonthEnd }}</div>
              <div>近一月数组：{{ searchParams.list }}</div>
            </template>
            <template v-else-if="flitertime == '季'">
              <div>季环比开始时间：{{ searchParams.chainMonthStart }}</div>
              <div>季环比结束时间：{{ searchParams.chainMonthEnd }}</div>
              <div>近一季月份数组：{{ searchParams.list }}</div>
            </template>
            <template v-else-if="flitertime == '年'">
              <div>近一年月份数组：{{ searchParams.list }}</div>
            </template>
          </div>
        </div>
      </div>

      <!--  table组件   -->
      <div class="page__card my-12">
        <g-title>三、table组件</g-title>
        <g-title type="error" dark class="my-12">
          <div style="font-size: 0.28rem">
            注：在columns中设置<span style="color: red">sortable = true</span>，表示当前列可以进行排序
          </div>
        </g-title>
        <g-table :columns="table.columns" :data="table.data">
          <template slot="operate" slot-scope="{ $index, row }">
            <van-button size="mini" type="warning" @click="onRowHandle($index, row)">操作</van-button>
          </template>
        </g-table>
      </div>

      <!--  popper-picker 组件   -->
      <div class="page__card my-12">
        <g-title>四、选项弹出框</g-title>
        <g-filter-type-picker :options="pickerColumns" v-model="pickerValue" :props="{ label: 'name' }">
        </g-filter-type-picker>

        <div class="mx-12">
          <div class="font-content mt-12">
            <g-title type="success">值区</g-title>
            <div>选项值：{{ pickerValue }}</div>
          </div>
        </div>
      </div>

      <div class="page__card my-12">
        <g-title>六、公共图表组件</g-title>
        <!-- <g-filter-type-picker :options="chartTypes" v-model="chartType" :props="{ label: 'name' }" /> -->
        <g-chart
          :title="'column柱状图'"
          :chartid="'1207__01'"
          :height="240"
          :data="chartDataNow"
          :label="['万元', '占比']"
          :type="'column'"
        />
        <g-chart :title="'bar条形图'" :chartid="'1207__02'" :height="300" :data="chartDataNowC" :type="'bar'" />
        <g-chart :title="'pie饼图'" :chartid="'1207__03'" :height="150" :data="chartDataNowPie" :type="'pie'" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import CalSummaryList from './components/CalSummaryList'

export default {
  name: 'Test',
  components: { CalSummaryList },
  data() {
    return {
      Toast,
      deptCode: '', // 科室code
      doctCode: '', // 医生code

      flitertime: '日',
      filtertimeOptions: ['年', '季', '月', '日'],
      searchParams: {},

      table: {
        columns: [
          {
            label: '序号',
            type: 'index',
            width: '1rem',
            fixed: 'left'
          },
          {
            label: '科室名称',
            type: 'link',
            prop: 'KS_NAME',
            width: '2rem',
            onClick: ({ row, $index }) => {
              console.log('当前的row序号是' + $index)
              console.log('当前的row值', row)
            }
          },
          { label: '门诊', prop: 'V_YLFWXW_MJZ_MZRC_KS', width: '2rem', sortable: true },
          { label: '初诊', prop: 'V_YLFWXW_MJZ_MZCZRC_KS', width: '2rem', sortable: true },
          { label: '复诊', prop: 'V_YLFWXW_MJZ_MZFZRC_KS', width: '2rem' },
          { label: '复诊率', prop: 'fzl', width: '2rem' },
          { label: '操作', slot: 'operate', width: '1rem', fixed: 'right' }
        ],
        data: [
          {
            D_ID: '2021120400',
            KS_ID: '04',
            KS_NAME: '儿童口腔科',
            V_YLFWXW_MJZ_MJZRC_KS: 105555,
            V_YLFWXW_MJZ_MZRC_KS: 105555,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 462,
            V_YLFWXW_MJZ_MZFZRC_KS: 142,
            V_YLFWXW_MJZ_PTMZRC_KS: 133,
            V_YLFWXW_MJZ_ZJMZRC_KS: 169,
            V_YLFWXW_MJZ_MZYBRC_KS: 220,
            V_YLFWXW_MJZ_MZZFRC_KS: 82,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '23.5%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '03',
            KS_NAME: '牙周病科',
            V_YLFWXW_MJZ_MJZRC_KS: 275,
            V_YLFWXW_MJZ_MZRC_KS: 550,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 470,
            V_YLFWXW_MJZ_MZFZRC_KS: 80,
            V_YLFWXW_MJZ_PTMZRC_KS: 223,
            V_YLFWXW_MJZ_ZJMZRC_KS: 52,
            V_YLFWXW_MJZ_MZYBRC_KS: 211,
            V_YLFWXW_MJZ_MZZFRC_KS: 64,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '14.5%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '05',
            KS_NAME: '口腔颌面外科',
            V_YLFWXW_MJZ_MJZRC_KS: 245,
            V_YLFWXW_MJZ_MZRC_KS: 490,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 488,
            V_YLFWXW_MJZ_MZFZRC_KS: 2,
            V_YLFWXW_MJZ_PTMZRC_KS: 177,
            V_YLFWXW_MJZ_ZJMZRC_KS: 68,
            V_YLFWXW_MJZ_MZYBRC_KS: 164,
            V_YLFWXW_MJZ_MZZFRC_KS: 81,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '0.4%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '01',
            KS_NAME: '牙体牙髓病科',
            V_YLFWXW_MJZ_MJZRC_KS: 207,
            V_YLFWXW_MJZ_MZRC_KS: 414,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 268,
            V_YLFWXW_MJZ_MZFZRC_KS: 146,
            V_YLFWXW_MJZ_PTMZRC_KS: 164,
            V_YLFWXW_MJZ_ZJMZRC_KS: 43,
            V_YLFWXW_MJZ_MZYBRC_KS: 152,
            V_YLFWXW_MJZ_MZZFRC_KS: 55,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '35.3%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '01',
            KS_NAME: '牙体牙髓病科sdfksfdksanmfksndfm,asnmfnd,msan,f,sma,nf,san,fdn,a',
            V_YLFWXW_MJZ_MJZRC_KS: 207,
            V_YLFWXW_MJZ_MZRC_KS: 414,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 268,
            V_YLFWXW_MJZ_MZFZRC_KS: 146,
            V_YLFWXW_MJZ_PTMZRC_KS: 164,
            V_YLFWXW_MJZ_ZJMZRC_KS: 43,
            V_YLFWXW_MJZ_MZYBRC_KS: 152,
            V_YLFWXW_MJZ_MZZFRC_KS: 55,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '35.3%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '07',
            KS_NAME: '口腔正畸科',
            V_YLFWXW_MJZ_MJZRC_KS: 189,
            V_YLFWXW_MJZ_MZRC_KS: 378,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 180,
            V_YLFWXW_MJZ_MZFZRC_KS: 198,
            V_YLFWXW_MJZ_PTMZRC_KS: 108,
            V_YLFWXW_MJZ_ZJMZRC_KS: 81,
            V_YLFWXW_MJZ_MZYBRC_KS: 121,
            V_YLFWXW_MJZ_MZZFRC_KS: 68,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '52.4%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '07',
            KS_NAME: '口腔正畸科',
            V_YLFWXW_MJZ_MJZRC_KS: 189,
            V_YLFWXW_MJZ_MZRC_KS: 378,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 180,
            V_YLFWXW_MJZ_MZFZRC_KS: 198,
            V_YLFWXW_MJZ_PTMZRC_KS: 108,
            V_YLFWXW_MJZ_ZJMZRC_KS: 81,
            V_YLFWXW_MJZ_MZYBRC_KS: 121,
            V_YLFWXW_MJZ_MZZFRC_KS: 68,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '52.4%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '07',
            KS_NAME: '口腔正畸科',
            V_YLFWXW_MJZ_MJZRC_KS: 189,
            V_YLFWXW_MJZ_MZRC_KS: 378,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 180,
            V_YLFWXW_MJZ_MZFZRC_KS: 198,
            V_YLFWXW_MJZ_PTMZRC_KS: 108,
            V_YLFWXW_MJZ_ZJMZRC_KS: 81,
            V_YLFWXW_MJZ_MZYBRC_KS: 121,
            V_YLFWXW_MJZ_MZZFRC_KS: 68,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '52.4%'
          },
          {
            D_ID: '2021120400',
            KS_ID: '07',
            KS_NAME: '口腔正畸科',
            V_YLFWXW_MJZ_MJZRC_KS: 189,
            V_YLFWXW_MJZ_MZRC_KS: 378,
            V_YLFWXW_MJZ_JZRC_KS: 0,
            V_YLFWXW_MJZ_MZCZRC_KS: 180,
            V_YLFWXW_MJZ_MZFZRC_KS: 198,
            V_YLFWXW_MJZ_PTMZRC_KS: 108,
            V_YLFWXW_MJZ_ZJMZRC_KS: 81,
            V_YLFWXW_MJZ_MZYBRC_KS: 121,
            V_YLFWXW_MJZ_MZZFRC_KS: 68,
            V_YLFWXW_MJZ_MZSSRC_KS: 0,
            fzl: '52.4%'
          }
        ]
      },

      pickerColumns: [
        { name: '药品收入', value: 'V_YLFYJG_MZSR_MZYPSR' },
        { name: '检查收入', value: 'V_YLFYJG_MZSR_MZJCSR_YS' },
        { name: '化验收入', value: 'V_YLFYJG_YLZSR_HYSR_YS' },
        { name: '手术收入', value: 'V_YLFYJG_MZSR_MZSSSR_YS' },
        { name: '麻醉收入', value: 'V_YLFYJG_MZSR_MZMZSR_YS' },
        { name: '治疗收入', value: 'V_YLFYJG_YLZSR_ZLSR_YS' },
        { name: '其他收入', value: 'V_YLFYJG_MZSR_MZWSQTSR_YS' }
      ],
      pickerValue: '',

      chartData: [
        { name: '药品收入', value: '10.6', unit: '小时' },
        { name: '检查收入', value: '12.8' },
        { name: '化验收入', value: '15.7' },
        { name: '手术收入', value: '16.2' },
        { name: '麻醉收入', value: '18.9' },
        { name: '治疗收入', value: '19.0' },
        { name: '其他收入', value: '20.2' }
      ],
      chartDataPie: [
        { name: '检查收入', value: '12.8' },
        { name: '手术收入', value: '16.2' }
      ],
      chartDataNow: [],
      chartDataNowC: [],
      chartDataNowPie: [],
      chartTypes: [
        { name: '基础柱状图 column', value: 'column' },
        { name: '横向的条形图 bar', value: 'bar' },
        { name: '饼图 pie', value: 'pie' }
      ],
      chartType: 'column',
      datareFresh5: 1
    }
  },

  methods: {
    async init() {
      console.log('')
      const params = await this.$refs.datePro.getDate()
      this.searchParams = { ...params, startDate: params.start, endDate: params.end }
      this.chartDataNow = this.chartData
      this.chartDataNowC = this.chartData
      this.chartDataNowPie = this.chartDataPie
      this.datareFresh5++
    },

    onConfirmDept(deptCode, doctCode) {
      console.log('onConfirmDept', deptCode, doctCode)
    },

    onConfirmDate(params = {}) {
      console.log('onConfirmDate', params)
      this.searchParams = params
    },

    onRowHandle(index, row) {
      console.log(index, row)
    }
  }
}
</script>

<style scoped lang="less">
.page {
  //background: #fff;
  height: 100vh;
  overflow: hidden;
  :deep(.page__body) {
    height: calc(100vh - 0.88rem);
    box-sizing: border-box;
    overflow: hidden auto;
    padding: 0 0.3rem;
    .ios-bounce-android;
    .page__card {
      padding: 0.2rem 0.3rem;
      background-color: #fff;
    }
    .font-content {
      color: @content-color;
    }
    .mt-12 {
      margin-top: 0.12rem;
    }
    .mx-12 {
      margin-left: 0.12rem;
      margin-right: 0.12rem;
    }
    .my-12 {
      margin-top: 0.12rem;
      margin-bottom: 0.12rem;
    }
    .px-12 {
      padding-left: 0.12rem;
      padding-right: 0.12rem;
    }
    .py-12 {
      padding-top: 0.12rem;
      padding-bottom: 0.12rem;
    }
  }
}

/*移动端ios 回弹*/
.ios-bounce-android {
  over-flow: auto; /* winphone8和android4+ */
  -webkit-overflow-scrolling: touch; /* ios5+ */
}
</style>
